<template>
  <div>
    <v-header></v-header>
    <div class="line"></div>
    <!--导航栏-->
    <v-menu></v-menu>
    <div class="musicBody">
      <div style="margin-top:40px">
        <el-tabs type="border-card"
                 :tab-position="tabPosition"
                 style="box-shadow: 0 0px 0px #ccc;"
                 @tab-click="getMusicListForType">
          <el-tab-pane :label="item.rankName" v-for="(item,index) in musicAllList" :key="index" :name="item.rankId">
            <!--榜单头部-->
            <div>
              <div style="display: inline-block;margin-top: 8px">
                <div>
                  <span style="font-size: 24px;font-weight:400;line-height:100%;padding: 5px;">{{item.rankName}}</span>
                  <span style="color:#999999;font-size: 14px;margin-left: 20px">{{item.addTime}}更新</span><br>
                </div>
                <div>
                  <span style="color: #999999;font-size: 14px;margin-top: 20px;padding: 5px">{{item.intro}}</span><br>
                </div>
                <div>
                  <span style="color: #999999;font-size: 14px;margin-top: 20px;padding: 5px">热度：{{item.playTimes/10000}}W</span>
                </div>
              </div>
            </div>
            <!-- 分割线-->
            <el-divider border-style="margin:12px"></el-divider>
            <!--音乐部分-->
            <el-table :data="musicListForType"
                      style="width: 100%"
                      v-loading="loading"
                      element-loading-text="Loading..."
                      element-loading-svg-view-box="-10, -10, 50, 50"
                      @cell-mouse-enter="handleMouseEnter"
                      @cell-mouse-leave="handleMouseLeave">
              <el-table-column prop="fileName" label="歌曲名" width="530"/>
              <el-table-column prop="component" width="150">
                <template slot-scope="scope">
                  <el-link :underline="false" v-show="true" @click="toPlayMusic(scope.$index)"><i class="iconfont icon-bofangsanjiaoxing"></i>
                  </el-link>
                  &nbsp;
                  <el-link :underline="false" v-show="true"><i class="iconfont icon-xiazai"></i></el-link>
                  &nbsp;
                  <el-link :underline="false" v-show="true"><i class="iconfont icon-xin"></i></el-link>
                  &nbsp;
                </template>
              </el-table-column>
              <el-table-column prop="timeLength" label="时长"/>
            </el-table>
            <el-link>
              <i class="el-icon-view"></i>查看更多
            </el-link>

          </el-tab-pane>
        </el-tabs>
      </div>
    </div>


  </div>

</template>

<script>
  import header from '../layout/Header.vue'
  import footer from '../layout/Footer.vue'
  import menu from '../layout/Menu.vue'

  export default {
    components: {
      'v-header': header,
      'v-footer': footer,
      'v-menu' : menu
    },
    name: 'MusicList',
    data () {
      return {
        //activeIndexTab:'8888',
        tabPosition: 'left',
        musicAllList: [],
        musicListForType: [],
        loading:true,
      }
    },
    methods: {
      test (tab, event) {
        console.log(tab.name)
      },
      //播放音乐
      toPlayMusic(res){
        let routeUrl=this.$router.resolve({
          path: '/playMusic',
          query: {
            hash:this.musicListForType[res].hash,
            albumId:this.musicListForType[res].albumId
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      //展示播放、下载、喜欢组件,鼠标移入显示，移出隐藏
      handleMouseEnter (row, column, cell, event) {
        // cell[2].isShowComponent=true;
        // console.log(column)
        // console.log(column.property)
      },
      handleMouseLeave(row, column, cell, event){
        // cell[2].isShowComponent=false;
      },
      //获取全部榜单信息
      getMusicAllList () {
        this.$axios({
          method: 'get',
          url: '/kugou/musicList/getAllList',
          dataType: 'json',
        }).then(res => {
          console.log(res.data.data.info)
          this.musicAllList = res.data.data.info
          const list = this.musicAllList
          for (let i = 0; i < this.musicAllList.length; i++) {
            list[i].rankId = list[i].rankId.toString()
          }
          this.musicAllList = list
        })
      },
      //获取每个榜单音乐
      getMusicListForType (tab, event) {
        this.$axios({
          method: 'get',
          url: '/kugou/musicListV2/' + tab.name,
          dataType: 'json',
        }).then(res => {
          this.loading=true;
          console.log(res.data.data.info)
          this.musicListForType = res.data.data.info
          const list = this.musicListForType
          for (let i = 0; i < this.musicListForType.length; i++) {
            let musicLength = (list[i].timeLength) / 1000
            let min = Math.floor(musicLength / 60)
            let second = Math.floor(musicLength - (min * 60))
            if (second < 10) {
              second = '0' + second
            }
            list[i].timeLength = min + ':' + second
          }
          this.loading=false;
        })
      }
    },
    mounted () {
      this.getMusicAllList()
    }
  }
</script>

<style>

  .musicBody {
    width: 1000px;
    margin: 0 auto;
  }
</style>
